<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Group map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAiJnupQQxmybJ8zIJtVG3EhQ1pLdxAbzTyexL2bnPqDdi3UWRuxSy5_UZSZO_HgeDnUNaTioWGyk9uQ"
            type="text/javascript"></script>
    <script type="text/javascript">

    var icons = ["http://labs.google.com/ridefinder/images/mm_20_purple.png", 
                 "http://labs.google.com/ridefinder/images/mm_20_yellow.png",
                 "http://labs.google.com/ridefinder/images/mm_20_blue.png",
                 "http://labs.google.com/ridefinder/images/mm_20_white.png",
                 "http://labs.google.com/ridefinder/images/mm_20_green.png",
                 "http://labs.google.com/ridefinder/images/mm_20_red.png",
                 "http://labs.google.com/ridefinder/images/mm_20_black.png",
                 "http://labs.google.com/ridefinder/images/mm_20_orange.png",
                 "http://labs.google.com/ridefinder/images/mm_20_gray.png",
                 "http://labs.google.com/ridefinder/images/mm_20_brown.png",
                 "http://www.google.com/mapfiles/markerA.png",
                 "http://www.google.com/mapfiles/markerB.png",
                 "http://www.google.com/mapfiles/markerC.png",
                 "http://www.google.com/mapfiles/markerD.png",
                ];
                
    function initialize(){
        if (GBrowserIsCompatible()) {
        
	        var map = new GMap2(document.getElementById("map_canvas"));
	        map.addControl(new GLargeMapControl())
	        map.enableScrollWheelZoom()
	        center=new GLatLng(0.0, 0.0)
	        map.setCenter(center, 3);
	        
	        color = -1;
		     {% for group in groups %}
		     color = (color + 1) % icons.length; 
		     points=[{% for pos in group.positions %}new GLatLng({{ pos.latitude }}, {{ pos.longitude }}), {% endfor %}]
		     show_group(map, points, color)
		     {% endfor %}
      }
    }
    
    function show_group(map, points, color) {
        var tinyIcon = new GIcon();
        tinyIcon.image = icons[color];
        tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
        tinyIcon.iconSize = new GSize(12, 20);
        tinyIcon.shadowSize = new GSize(22, 20);
        tinyIcon.iconAnchor = new GPoint(6, 20);
        tinyIcon.infoWindowAnchor = new GPoint(5, 1);

        // Set up our GMarkerOptions object literal
        var markerOptions = { icon:tinyIcon };

        // Add markers to the map
        for (var i = 0; i < points.length; i++) {
          map.addOverlay(new GMarker(points[i], markerOptions));
        }
        
    }
    

    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()" style="height:100%" >
    <div id="map_canvas" style="display:block;
                                position:absolute;
                                top:0;
                                left:0;
                                /*set the width and height to 100% of the screen*/
                                width:100%;
                                height:100%;">
    </div>
  </body>
</html>
